﻿<div class="ui-widget-content">
    <h3>Resizable - Eventos</h3>
    <p>
        Semelhantemente ao draggable, quando um resizable é redimensionado, este dispara alguns eventos. Tais eventos são:
        <ul>
            <li><tt>start</tt> - Quando o redimensionamento começa.</li>
            <li><tt>stop</tt> - Quando o redimensionamento termina.</li>
            <li><tt>resize</tt> - Quando o resizable muda de tamanho.</li>
        </ul>
    </p>
    <p>
        Por exemplo, este resizable tem <span id="resize_largura">300</span>x<span id="resize_altura">20</span> pixels.
        <div style="width: 300px; height: 20px; padding: 10px" id="resize_eventos" class="ui-widget-content clicavel">
            <span id="resize_texto">Estou quieto, me redimensione.</span>
        </div>
    </p>
    <p>Eis como é que se faz isso:</p>
    <p>
        <pre>$("#resize_eventos").resizable({
    start: function(event, ui) {
        $("#resize_texto").html("Que legal, estou mudando de tamanho!");
    },
    stop: function(event, ui) {
        $("#resize_texto").html("Estou quieto, me redimensione.");
    },
    resize: function(event, ui) {
        $("#resize_largura").html($(this).width());
        $("#resize_altura").html($(this).height());
    }
});</pre>
    </p>
    <script type="text/javascript">
        inicializador.resizableEventos = function() {
            $("#resize_eventos").resizable({
                start: function(event, ui) {
                    $("#resize_texto").html("Que legal, estou mudando de tamanho!");
                },
                stop: function(event, ui) {
                    $("#resize_texto").html("Estou quieto, me redimensione.");
                },
                resize: function(event, ui) {
                    $("#resize_largura").html($(this).width());
                    $("#resize_altura").html($(this).height());
                }
            });
        };
    </script>
</div>